{include file="$_builder_style_" /}
<section class="content pt-5">
      <div class="box box-solid eacoo-box">
        <div class="box-body">
            <div class="builder sort sortbuilder-box mt-10">
                <form action="{$post_url}" method="post" class="sort-builder form-horizontal">

                        <div class="form-group clearfix">

                            <div class="col-xs-2 with-padding">
                                <select value="" size="15" class="form-control" style="width: 100%">
                                    {volist name="list" id="vo"}
                                        <option class="ids" title="{$vo.title}" value="{$vo.id}">{$vo.title}</option>
                                    {/volist}
                                </select>
                            </div>
                            <div class="col-xs-1">
                                <button class="top btn btn-default btn-block" type="button">第一</button>
                                <button class="up btn btn-default btn-block" type="button">上移</button>
                                <button class="down btn btn-default btn-block" type="button">下移</button>
                                <button class="bottom btn btn-default btn-block" type="button">最后</button>
                            </div>
                        </div>
                            <div class="form-group sort_bottom with-padding">
                                <div class="col-md-6 ">
                                <input type="hidden" name="ids">
                                     {volist name="buttonList" id="button"}
                                            <button {$button.attr}>{$button.title}</button>  &nbsp;&nbsp;
                                     {/volist}

                              </div>
                          </div>
                </form>
            </div>
        </div>
    </div>
</section>

{block name="script"}
    <script type="text/javascript">
        $(function(){
            sort();
            $(".top").click(function(){
                rest();
                $("option:selected").prependTo("select");
                sort();
            })
            $(".bottom").click(function(){
                rest();
                $("option:selected").appendTo("select");
                sort();
            })
            $(".up").click(function(){
                rest();
                $("option:selected").after($("option:selected").prev());
                sort();
            })
            $(".down").click(function(){
                rest();
                $("option:selected").before($("option:selected").next());
                sort();
            })
            $(".search").click(function(){
                var v = $("input").val();
                $("option:contains("+v+")").attr('selected','selected');
            })
            function sort(){
                $('option').text(function(){return ($(this).index()+1)+'.'+$(this).text()});
            }

            //重置所有option文字。
            function rest(){
                $('option').text(function(){
                    return $(this).text().split('.')[1]
                });
            }

            //获取排序并提交
            $('.sort_confirm').click(function(){
                var arr = new Array();
                $('.ids').each(function(){
                    arr.push($(this).val());
                });
                $('input[name=ids]').val(arr.join(','));
                $.post(
                        $('form').attr('action'),
                        {
                            'ids' :  arr.join(',')
                        },
                        function(result){
                            if (result.code) {
                                updateAlert(result.msg +',页面即将自动跳转~','success');
                            }else{
                                updateAlert(result.msg,'error');
                            }
                            setTimeout(function(){
                                if (result.code) {
                                    if (result.url) {
                                        location.href = result.url;
                                    } else if ($(this).hasClass('no-refresh')) {
                                        $('#top-alert').find('button').click();
                                        $(this).removeClass('disabled').prop('disabled', false);
                                    } else {
                                        location.reload();
                                    }
                                    //$('.sort_cancel').click();
                                }else{
                                    if (result.url) {
                                        location.href = result.url;
                                    } else {
                                        $('#top-alert').find('button').click();
                                        $(this).removeClass('disabled').prop('disabled', false);
                                    }
                                }
                            },1500);
                        },
                        'json'
                );
            });
        })
    </script>
{/block}